<template>
	<view class="content">
		<div class="mine" @click="goUserInfo()">
			<image src="../../static/images/mine1.jpg" mode="aspectFill" class="bg"></image>
			<view class="user">
				<image :src="userInfo.avatar" mode="aspectFill" class="avatar"></image>
				<div class="r">
					<h3 class="name">{{userInfo.nickname}}
						<div class="jifen">积分:{{userInfo.score}}</div>
					</h3>
					<p class="type">{{userInfo.level_name}}</p>
				</div>
			</view>
		</div>

		<view class="main">
			<view class="mine-order">
				<div class="t">
					<p class="">我的订单</p>
					<navigator url="/pages/orderList/orderList">
						<p class="more">更多></p>
					</navigator>
				</div>
				<div class="list">
					<navigator url="/pages/orderList/orderList?status=1" class="items">
						<div class="">
							<image src="../../static/icon/icon2.png" mode="widthFix"></image>
							<p>待付款</p>
						</div>
					</navigator>
					<navigator url="/pages/orderList/orderList?status=2" class="items">
						<div class="">
							<image src="../../static/icon/icon1.png" mode="widthFix"></image>
							<p>待发货</p>
						</div>
					</navigator>
					<navigator url="/pages/orderList/orderList?status=3" class="items">
						<div class="">
							<image src="../../static/icon/icon17.png" mode="widthFix"></image>
							<p>已发货</p>
						</div>
					</navigator>
					<navigator url="/pages/orderList/orderList?status=4" class="items">
						<div class="">
							<image src="../../static/icon/icon6.png" mode="widthFix"></image>
							<p>交易完成</p>
						</div>
					</navigator>
					<!-- 
					<navigator url="/pages/orderList/orderList?status=4" class="items">
						<div class="">
							<image src="../../static/icon/icon5.png" mode="widthFix"></image>
							<p>交易关闭</p>
						</div>
					</navigator> -->
				</div>
			</view>
			<!-- <view class="mine-tgy">
				<div class="t">
					<p class="">推广员</p>
					<p class="more">更多></p>
				</div>
				<div class="list">
					<div class="items">
						<h3>¥99.00</h3>
						<p>待提现</p>
					</div>
					<div class="items">
						<h3>¥100.00</h3>
						<p>累计收入</p>
					</div>
					<div class="items">
						<h3>99</h3>
						<p>累计客户</p>
					</div>
				</div>
			</view> -->
			<view class="mine-list">
				<navigator url="/pages/userInfo/userInfo" class="items">
					<div class="l">
						<image src="../../static/icon/icon7.png" mode="widthFix"></image>
						个人资料
					</div>
					<div class="r">
						<image src="../../static/images/jt.png" mode="widthFix"></image>
					</div>
				</navigator>
				<navigator url="/pages/score/score" class="items">
					<div class="l">
						<image src="../../static/icon/icon15.png" mode="widthFix"></image>
						我的积分
					</div>
					<div class="r">
						<image src="../../static/images/jt.png" mode="widthFix"></image>
					</div>
				</navigator>
				<!-- <navigator url="/pages/balance/balance" class="items">
					<div class="l">
						<image src="../../static/icon/icon16.png" mode="widthFix"></image>
						我的余额
					</div>
					<div class="r">
						<image src="../../static/images/jt.png" mode="widthFix"></image>
					</div>
				</navigator> -->
				<!-- 			<navigator url="/pages/form/form" class="items">
					<div class="l">
						<image src="../../static/icon/icon13.png" mode="widthFix"></image>
						成为省代/经销商
					</div>
					<div class="r">
						<image src="../../static/images/jt.png" mode="widthFix"></image>
					</div>
				</navigator> -->
				<!-- <div class="items">
					<div class="l">
						<image src="../../static/icon/icon4.png" mode="widthFix"></image>
						分销中心
					</div>
					<div class="r">
						<image src="../../static/images/jt.png" mode="widthFix"></image>
					</div>
				</div> -->
				<navigator url="/pages/addressList/addressList" class="items">
					<div class="l">
						<image src="../../static/icon/icon3.png" mode="widthFix"></image>
						收货人地址
					</div>
					<div class="r">
						<image src="../../static/images/jt.png" mode="widthFix"></image>
					</div>
				</navigator>
			
				<navigator url="/pages/zengsong/zengsong" class="items">
					<div class="l">
						<image src="../../static/icon/icon16.png" mode="widthFix"></image>
						赠送记录
					</div>
					<div class="r">
						<image src="../../static/images/jt.png" mode="widthFix"></image>
					</div>
				</navigator>
				<navigator url="/pages/tjg/tjg" class="items">
					<div class="l">
						<image src="../../static/icon/icon16.png" mode="widthFix"></image>
						推荐官
					</div>
					<div class="r">
						<image src="../../static/images/jt.png" mode="widthFix"></image>
					</div>
				</navigator>
				<navigator url="/pages/fankui/fankui" class="items">
					<div class="l">
						<image src="../../static/icon/icon15.png" mode="widthFix"></image>
						反馈
					</div>
					<div class="r">
						<image src="../../static/images/jt.png" mode="widthFix"></image>
					</div>
				</navigator>
				<!-- <div class="items">
					<div class="l">
						<image src="../../static/icon/icon14.png" mode="widthFix"></image>
						退出登陆
					</div>
					<div class="r">
						<image src="../../static/images/jt.png" mode="widthFix"></image>
					</div>
				</div> -->
			</view>
		</view>

	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				userInfo: {}
			}
		},
		onLoad() {

		},
		onShow() {
			console.log(uni.getStorageSync('userInfo'))
			if (uni.getStorageSync('userInfo')) {
				this.getUserInfo()
				// this.userInfo = uni.getStorageSync('userInfo')
			}else{
				this.getUserInfo()
			}
		},
		methods: {
			goUserInfo(){
				uni.navigateTo({
					url:"/pages/userInfo/userInfo"
				})
			},

			getUserInfo() {
				request({
					url: 'user/center',
					method: 'get',
					data: {
					}
				}).then(res => {
					console.log(res)
					if(res.status==200){
						this.userInfo = res.data
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
		/* 灰色背景 */
		min-height: 100vh;
		/* 确保高度占满屏幕 */
	}

	.mine {
		height: 294rpx;
		position: relative;
		width: 100%;
		overflow: hidden;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			height: 294rpx;
			width: 100%;
			z-index: 1;
		}

		color: #fff;
		font-size: 36rpx;

		.type {
			background: #ffe7d2;
						font-size: 22rpx;
						width: 120rpx;
						text-align: center;
						color: #ae816e;
						border-radius: 16rpx;
						height: 32rpx;
						line-height: 32rpx;
						margin-top: 15rpx;
		}

		.user {
			position: absolute;
			z-index: 2;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			padding: 0 50rpx;
.avatar {
				width: 112rpx;
				height: 112rpx;
				border-radius: 100%;
				margin-right: 30rpx;
			}
			h3 {
				display: flex;
				align-items: center;
			}

			.jifen {}

			.yue,
			.jifen {
				text-shadow: 0 0 #4a90e2;
				font-size: 28rpx;
				display: flex;
				margin-left: 10rpx;

				p {
					width: 100rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					border-radius: 5rpx;
					margin-left: 5rpx;
					text-shadow: none;
					font-size: 22rpx;
					background-color: #fff;
					color: #4a90e2;
				}
			}

			
		}
	}

	.main {
		padding: 30rpx;


	}

	.mine-order {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		padding-bottom: 40rpx;

		.t {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #000;
			margin-bottom: 40rpx;

			.more {
				color: #666;
				font-size: 24rpx;
			}
		}

		.list {
			display: flex;

			.items {
				width: 25%;
				text-align: center;
				font-size: 24rpx;
				color: #333;

				p {
					margin-top: 15rpx;
				}

				image {
					display: block;
					width: 50rpx;
					margin: 0 auto;
				}
			}
		}
	}

	.mine-tgy {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		padding-bottom: 40rpx;
		margin-top: 30rpx;

		.t {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #000;
			margin-bottom: 40rpx;

			.more {
				color: #666;
				font-size: 24rpx;
			}
		}

		.list {
			display: flex;

			.items {
				width: 33.3%;
				text-align: center;

				h3 {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				p {
					font-size: 24rpx;
				}
			}
		}
	}

	.mine-list {
		background-color: #fff;
		margin-top: 30rpx;
		border-radius: 10rpx;
		padding: 0 20rpx;

		.items {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			border-bottom: 1px solid #eeeef3;

			&:last-child {
				border: none;
			}

			.l {
				display: flex;
				align-items: center;
				font-size: #333;
				font-size: 28rpx;

				image {
					width: 40rpx;
					display: block;
					margin-right: 20rpx;
				}
			}

			.r {
				image {
					display: block;
					width: 40rpx;
				}
			}
		}
	}
</style>